<template>
  <el-text class="pipe-money" :type="getColorType"
    >{{ getMoneyBySign }} {{ props.type === '1' ? '元' : '积分' }}</el-text
  >
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps({
  // 订单类型
  type: {
    type: String,
    required: true,
    validator: (value: string) => ['1', '2'].includes(value)
  },

  money: {
    type: [Number, String],
    required: true
  },

  // 是否强制显示[加|减]符号，默认只显示减号
  showSign: {
    type: Boolean,
    default: false
  }
});

const getColorType = computed(() => {
  // 没有金额则灰色
  if (+props.money === 0) return 'info';

  // 如果是负数则红色
  if (+props.money < 0) return 'danger';

  // 金额绿色
  if (props.type === '1') return 'primary';

  // 积分黄色
  if (props.type === '2') return 'warning';

  // 否则灰色
  return 'info';
});

const getMoneyBySign = computed(() => {
  const money = +props.money;
  // 若money大于0，则强制显示加号
  if (props.showSign && money > 0) return `+${money}`;
  return money;
});
</script>

<style lang="scss" scoped>
.pipe-money {
  font-weight: 800;
}
</style>
